<template>
	<view>
		<u-navbar :border-bottom='false' :title="title" back-icon-size='48'>
			<view slot='right' style="padding-right: 32rpx;color: #3587F7;font-size: 32rpx;" @click="saveInfo">
				完成
			</view>
		</u-navbar>
		<view class="btns">
			<view class="btn-li" @click="chooseImg">
				<u-icon name="scan" color="#3587F7" size="32"></u-icon><text>身份证扫描</text>
			</view>
			<view class="btn-li" @click="showModel=true">
				<u-icon name="weixin-fill" color="#3587F7" size="32"></u-icon><text>邀请好友填写</text>
			</view>
		</view>
		<view class="tips">
			<text style="color: #E5793B;">小贴士：</text>为了您顺利出行，请保证填写项已所持证件一致
		</view>
		<view class="linkman-info">
			<view class="linkman-infoBox">
				<view class="lable">
					姓名
				</view>
				<input class="input" type="text" v-model="idName" />
			</view>
			<view class="linkman-infoBox">
				<view class="lable">
					证件类型
				</view>
				<view class="input select">
					<text>身份证</text>
					<u-icon name="arrow-right" color="#999999" size="28" style="margin-left: auto;"></u-icon>
				</view>
			</view>
			<view class="linkman-infoBox">
				<view class="lable">
					证件号码
				</view>
				<input class="input" type="text" v-model="idNumber" />
			</view>
			<view class="linkman-infoBox">
				<view class="lable">
					手机号
				</view>
				<input class="input" type="text" v-model="mobile" />
			</view>
			<!-- 	<view class="linkman-infoBox">
				<view class="lable">
					ID号
				</view>
				<view class="input" style="border-bottom: none;display: flex;align-items: center;">
					<input type="text" v-model="recomId" />
					<view class="huoqu" @click="getId">
						获取ID号
					</view>
				</view>
			</view> -->
		</view>
		<u-modal v-model="showModel" :content="content" title='发送给微信好友' :show-cancel-button='true'></u-modal>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				content: '将出行信息填写表发给好友填写',
				showModel: false,
				title: '添加出行人',
				idName: '', // 姓名
				idNumber: '', // 身份证
				recomId: '', // 用户id,
				mobile: ''
			}
		},
		onLoad(option) {
			if (option.name) {
				this.idName = option.name
				this.idNumber = option.num
			}
		},
		methods: {
			// 拍照身份证
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['camera'],
					success: function(res) {
						that.uploadImg(res.tempFilePaths)
					}
				});
			},

			// 上传身份证识别
			uploadImg(imgFiles) {
				let that = this
				uni.uploadFile({
					url: that.$baseURL + 'upload/idcard',
					filePath: imgFiles[0],
					name: 'file',
					success: (uploadFileRes) => {
						let obj = JSON.parse(uploadFileRes.data)
						if (obj.status) {
							// 识别成功
							uni.showToast({
								title: '识别成功'
							})
							that.idName = obj.data.words_result["姓名"].words
							that.idNumber = obj.data.words_result["公民身份号码"].words
						} else {
							// 识别失败
							uni.showToast({
								title: obj.msg,
								icon: 'none'
							})
						}
					}
				})
			},

			async getTripeople() {
				let {
					page
				} = this
				let res = await myRequest.getTripman({
					page: '1',
					num: '100'
				})
				if (res.status) {
					res.data.forEach(item => {
						item.checked = false
					})
					this.$store.commit('changeTripman', res.data)
				}
			},
			async saveInfo() {
				let {
					idName,
					idNumber,
					mobile
				} = this
				if (!idName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!idNumber) {
					uni.showToast({
						title: '请输入证件信息',
						icon: 'none'
					})
					return
				}
				if (!mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				let res = await myRequest.addTripman({
					id_name: idName,
					id_number: idNumber,
					id_type: '1',
					mobile: mobile
				})
				if (res.status) {
					uni.showToast({
						title: '添加成功'
					})
					this.getTripeople()
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		padding: 28rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn-li {
			width: 336rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #3587F7;

			text {
				margin-left: 8rpx;
			}
		}
	}

	.tips {
		width: 100%;
		height: 80rpx;
		background: #FEF7EF;
		line-height: 80rpx;
		font-size: 24rpx;
		font-family: Segoe UI;
		font-weight: 400;
		padding-left: 28rpx;
	}

	.linkman-info {
		padding: 0 28rpx;
		background-color: #FFFFFF;

		.linkman-infoBox {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lable {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}

			.input {
				width: 75%;
				height: 100%;
				border-bottom: 2rpx solid #F2F2F2;

				input {
					width: 50%;
				}

				.huoqu {
					margin-left: auto;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
				}
			}

			.select {
				display: flex;
				align-items: center;
			}
		}
	}
</style>
